<template>
    <!-- <div>本月效率排行</div> -->
    <div class="table-container">
        <a-table
            v-for="n in 3"
            :key="n"
            :columns="columns"
            :data-source="data"
            :pagination="false"
            bordered
            class="toumin"
        >
            <template #summary>
                <!-- <a-table-summary-row>
                    <a-table-summary-cell>Total</a-table-summary-cell>
                    <a-table-summary-cell>
                        <a-typography-text type="danger">{{ totals.totalBorrow }}</a-typography-text>
                    </a-table-summary-cell>
                    <a-table-summary-cell>
                        <a-typography-text>{{ totals.totalRepayment }}</a-typography-text>
                    </a-table-summary-cell>
                </a-table-summary-row> -->
                <a-table-summary-row>
                    <!-- <a-table-summary-cell>Balance</a-table-summary-cell>
                    <a-table-summary-cell :col-span="2">
                        <a-typography-text type="danger">
                            {{ totals.totalBorrow - totals.totalRepayment }}
                        </a-typography-text>
                    </a-table-summary-cell> -->
                </a-table-summary-row>
            </template>
        </a-table>
    </div>
</template>
<script lang="ts" setup>
import type { TableColumnsType } from 'ant-design-vue';
import { computed, ref } from 'vue';

const columns = ref<TableColumnsType>([
    {
        title: '序号',
        dataIndex: 'name'
    },
    {
        title: '承修单位',
        dataIndex: 'borrow'
    },
    {
        title: '次数',
        dataIndex: 'repayment'
    },
    {
        title: '响应时间',
        dataIndex: 'repayment'
    },
    {
        title: '受理时间',
        dataIndex: 'repayment'
    }
]);

const data = ref([
    {
        key: '1',
        name: 'John Brown',
        borrow: 10,
        repayment: 33
    },
    {
        key: '2',
        name: 'Jim Green',
        borrow: 100,
        repayment: 0
    },
    {
        key: '3',
        name: 'Joe Black',
        borrow: 10,
        repayment: 10
    },
    {
        key: '4',
        name: 'Jim Red',
        borrow: 75,
        repayment: 45
    },
    {
        key: '1',
        name: 'John Brown',
        borrow: 10,
        repayment: 33
    },
    {
        key: '2',
        name: 'Jim Green',
        borrow: 100,
        repayment: 0
    },
    {
        key: '3',
        name: 'Joe Black',
        borrow: 10,
        repayment: 10
    },
    {
        key: '4',
        name: 'Jim Red',
        borrow: 75,
        repayment: 45
    },
    {
        key: '1',
        name: 'John Brown',
        borrow: 10,
        repayment: 33
    },
    {
        key: '2',
        name: 'Jim Green',
        borrow: 100,
        repayment: 0
    },
    {
        key: '3',
        name: 'Joe Black',
        borrow: 10,
        repayment: 10
    },
    {
        key: '4',
        name: 'Jim Red',
        borrow: 75,
        repayment: 45
    }
]);

const totals = computed(() => {
    let totalBorrow = 0;
    let totalRepayment = 0;

    data.value.forEach(({ borrow, repayment }) => {
        totalBorrow += borrow;
        totalRepayment += repayment;
    });
    return { totalBorrow, totalRepayment };
});
</script>
<style lang="scss">
@import '../../assets/style/tableDeep.scss';

.table-container {
    display: flex;
    justify-content: space-evenly;
}

:deep(.toumin) {
    color: rgb(24, 144, 104);
    /* 颜色不能修改*/
}

.toumin {
    width: 700px;
}
</style>
